<template>
  <div class="container">
    <div class="handle-box">
      <!-- <el-button type="primary" size="medium" @click="$router.push({path:'/member/check'})">会员必填项</el-button> -->
    </div>
    <div class="handle-box">
      <span style="padding:8px;">姓名：</span>
      <el-input v-model="query.nickname" 
                placeholder="姓名"
                class="handle-input mr10"></el-input>
                <!-- <span style="padding:8px;">电话：</span>
      <el-input v-model="query.mobile"
                placeholder="电话"
                class="handle-input mr10"></el-input> -->
      <!-- <span style="padding:8px;">会员类型：</span>
      <el-select v-model="query.is_vip"  @change="initAjaxMethod" placeholder="请选择">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="普通会员" :value="1"></el-option>
          <el-option label="vip会员" :value="2"></el-option>
      </el-select>
       <span style="padding:8px;">展示游客：</span>
       <el-switch
        @change="matchmakerStatus"
        v-model="query.matchmaker_status"
        active-text="展示"
        inactive-text="不展示">
      </el-switch> -->
      <span style="padding:8px;"></span>
      <el-button type="success"
                 icon="el-icon-search"
                 size="medium"
                 @click="handleSearch">搜索</el-button>
      <!-- <el-button type="warning"
                 size="medium"
                 icon="el-icon-refresh-left"
                 @click="resultClick()">重置</el-button> -->
    </div>
    <el-table :data="tableData"
              border
              ref="multipleTable"
              header-cell-class-name="table-header"
              @selection-change="handleSelectionChange">
      <el-table-column label="序号"
                       align="center"
                       width="100"
                       fixed>
        <template slot-scope="scope">{{scope.$index+(query.pageIndex - 1) * query.pageSize + 1}}</template>
      </el-table-column>
      <el-table-column label="头像"
                       align="center">
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px" :src="baseImgUrl+(scope.row.headimgurl || scope.row.avatarUrl)" fit="contain"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="昵称"
                       align="center">
        <template slot-scope="scope">{{scope.row.alias_nickname}}</template>
      </el-table-column>
          <el-table-column label="手机"
                       align="center">
        <template slot-scope="scope">{{scope.row.mobile}}</template>
      </el-table-column>
      <!-- <el-table-column label="会员性别"
                       align="center">
        <template slot-scope="scope">
              <span v-if="scope.row.sex==1">男</span>
              <span v-if="scope.row.sex==2">女</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="电话"
                       align="center">
        <template slot-scope="scope">{{scope.row.mobile}}</template>
      </el-table-column>
   -->
     
      <!-- <el-table-column label="会员状态" align="center">
          <template slot-scope="scope">
              <span v-if="scope.row.vip_card">VIP会员</span>
              <span v-else>
                <span v-if="scope.row.matchmaker_status==0">游客</span>
                <span v-if="scope.row.matchmaker_status==1">普通会员</span>
              </span>
          </template>
      </el-table-column> -->
      <!-- <el-table-column label="推荐人"
                       align="center">
        <template slot-scope="scope">{{scope.row.matchmaker_info?scope.row.matchmaker_info.nickname:''}}</template>
      </el-table-column> -->
      <!-- <el-table-column label="实名认证" align="center">
          <template slot-scope="scope">
              <span v-if="scope.row.matchmaker_status==0">未实名</span>
              <span v-if="scope.row.matchmaker_status==1">已实名</span>
          </template>
      </el-table-column> -->
      <!-- <el-table-column label="线上vip" align="center">
          <template slot-scope="scope">
              <span v-if="scope.row.vip_card">
                过期时间 {{scope.row.vip_card.end_time | formDate}}
              </span>
              <span v-else>否</span>
          </template>
      </el-table-column> -->
     
      <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">{{scope.row.create_time | formDate}}</template>
      </el-table-column>
      <el-table-column label="操作"
                       width="290"
                       align="center">
        <template slot-scope="scope">
          <!-- <el-button v-if="scope.row.realname_status==1 && scope.row.status==1" @click="createBus(scope.row,index,2)"
                     type="text"
                     size="small"
                     icon="el-icon-edit">审核通过</el-button>
          <el-button @click="createBus(scope.row,index,3)"
                    class="red"
                     type="text"
                     size="small"
                     icon="el-icon-edit">审核不通过</el-button> -->
          <!-- <el-button @click="getDetail(scope.row)"
                     type="text"
                     size="small"
                     icon="el-icon-edit"
                     >查看详情</el-button> -->
          <!-- <el-button @click="setMatchmaker(scope.row)"
                     v-if="scope.row.matchmaker"
                     type="text"
                     size="small"
                     icon="el-icon-edit">变更推荐人</el-button> -->
          <!-- <el-button @click="handleDelete(scope.row)"
                     type="text"
                     size="small"
                     icon="el-icon-delete"
                     class="red">注销</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background
                     layout="total, prev, pager, next, jumper"
                     :current-page="query.pageIndex"
                     :page-size="query.pageSize"
                     :total="pageTotal"
                     @current-change="handlePageChange"></el-pagination>
    </div>
    <el-dialog title="会员详情" :visible.sync="dialog" width="60%" >
        <el-form class="demo-form-inline" :label-position="'left'">
          <el-form-item label="头像">
            <el-image style="width: 50px; height: 50px" :src="baseImgUrl+(formInline.headimgurl || formInline.avatarUrl)" :preview-src-list="[baseImgUrl+(formInline.headimgurl || formInline.avatarUrl)]" fit="contain"></el-image>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="formInline.nickname" readonly></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="formInline.mobile" readonly></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <span v-if="formInline.sex==1">男</span>
            <span v-if="formInline.sex==2">女</span>
          </el-form-item>
          <el-form-item label="身高cm">
            <el-input v-model="formInline.height" readonly></el-input>
          </el-form-item>
          <el-form-item label="体重kg">
            <el-input v-model="formInline.weight" readonly></el-input>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="formInline.education" readonly></el-input>
          </el-form-item>
          <el-form-item label="毕业院校">
            <el-input v-model="formInline.school" readonly></el-input>
          </el-form-item>
          <el-form-item label="现居地">
            <el-input v-model="formInline.city" readonly></el-input>
          </el-form-item>
          <el-form-item label="家乡">
            <el-input v-model="formInline.home" readonly></el-input>
          </el-form-item>
          <el-form-item label="毕业状态">
            <el-input v-model="formInline.graduation_status" readonly></el-input>
          </el-form-item>
          <el-form-item label="是否购车">
            <el-input v-model="formInline.vehicle" readonly></el-input>
          </el-form-item>
           <el-form-item label="房产情况">
            <el-input v-model="formInline.property_situation" readonly></el-input>
          </el-form-item>
          <el-form-item label="年收入情况">
            <el-input v-model="formInline.income" readonly></el-input>
          </el-form-item>
          <el-form-item label="是否吸烟">
            <el-input v-model="formInline.smoke" readonly></el-input>
          </el-form-item>
          <el-form-item label="是否喝酒">
            <el-input v-model="formInline.drink" readonly></el-input>
          </el-form-item>
          <el-form-item label="职业">
            <el-input v-model="formInline.career" readonly></el-input>
          </el-form-item>
          <el-form-item label="婚姻状况">
            <el-input v-model="formInline.marriage" readonly></el-input>
          </el-form-item>
          <el-form-item label="照片墙">
            <el-image v-for="(item,index) in formInline.photo_wall" :key="index" style="width: 80px; height: 100px" :src="baseImgUrl+item.url" :preview-src-list="srcList"  @click="vbs()" fit="contain"></el-image>
          </el-form-item>
          <el-form-item label="自我描述">
            <el-input type="textarea" :rows="4" v-model="formInline.self_description" readonly></el-input>
          </el-form-item>
          <el-form-item label="兴趣还好">
            <el-input type="textarea" :rows="4" v-model="formInline.interest" readonly></el-input>
          </el-form-item>
          <el-form-item label="爱情观">
            <el-input type="textarea" :rows="4" v-model="formInline.view_point_love" readonly></el-input>
          </el-form-item>
          <el-form-item label="理想的另一半">
            <el-input type="textarea" :rows="4" v-model="formInline.ideal_partner" readonly></el-input>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="formInline.credential_id" readonly></el-input>
          </el-form-item>
          <el-form-item label="毕业证书">
            <el-image style="width: 120px; height: 50px" :src="baseImgUrl+formInline.diploma_img" :preview-src-list="[baseImgUrl+formInline.diploma_img]" fit="contain"></el-image>
          </el-form-item>
          <el-form-item label="社保图片">
            <el-image style="width: 120px; height: 50px" :src="baseImgUrl+formInline.social_security_img" :preview-src-list="[baseImgUrl+formInline.social_security_img]" fit="contain"></el-image>
          </el-form-item>
          <el-form-item label="单身证明">
            <el-image style="width: 120px; height: 50px" :src="baseImgUrl+formInline.is_single_img" :preview-src-list="[baseImgUrl+formInline.is_single_img]" fit="contain"></el-image>
          </el-form-item>
        </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" type="primary" @click="dialog=false">确 定</el-button>
            </span>
    </el-dialog>
    <el-dialog title="变更推荐人" :visible.sync="editVisible" width="40%">
        <div class="list-group">
            <div style="padding: 10px">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="list-title">推荐人:</div>
                    </el-col>
                    <el-col :span="18">
                      <el-select v-model="setQuery.matchmaker_id" filterable placeholder="请选择">
                        <el-option
                          v-for="item in listMatchmaker"
                          :key="item.id"
                          :label="item.nickname"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-col>
                </el-row>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="medium" @click="editVisible = false">取 消</el-button>
            <el-button size="medium" type="primary" @click="saveEdit">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/index';
import { getdate } from '@/utils/utils';
export default {
    name: 'financeList',
    data() {
        return {
            exhibition_id: '',
            query: {
                pageIndex: 1,
                pageSize: 10,
                nickname: '',
                mobile: '',
                is_vip: 0,
                is_card: 0,
                matchmaker_status: false
            },
            baseImgUrl: api.IMG_PATH,
            zzTypeist: [],
            listMatchmaker: [],
            pageTotal: 0,
            tableData: [],
            fId: '',
            f_text: '',
            fTextModel: false,
            dialog: false,
            editVisible: false,
            formInline: {},
            srcList: [],
            setQuery:{
              matchmaker_id:'',
              id:''
            }
        };
    },
    filters: {
        toFixedFile: function (val) {
            if (!val) return '0.00';
            return Number(val).toFixed(2);
        },
        formDate: (val) => {
            if (!val) return '';
            return getdate(val);
        }
    },
    mounted() {
        this.initAjaxMethod();
        this.ohterAjaxMethd()
    },

    methods: {
        vbs() {
            let _this = this;
            let photo_wall = _this.formInline.photo_wall;
            let srcList = [];
            for (var i in photo_wall) {
                srcList[i] = _this.baseImgUrl + photo_wall[i]['url'];
            }
            console.log('srcList', srcList);
            this.srcList = srcList;
        },
        getDetail(data) {
            this.formInline = data;
            this.dialog = true;
        },
        //打回
        refuseMethod(data) {
            this.f_text = '';
            this.fTextModel = true;
            this.fId = data.id;
        },
        saveEdit() {
            if (!this.setQuery.matchmaker_id && this.setQuery.matchmaker_id == '') {
              return this.$message.error('请选择一个红娘');
            }
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.TECHNICIAN_SET_MATCHMAKER, this.setQuery)
                .then((res) => {
                    loading.close();
                    console.log('项目列表', res);
                    if (res.code == 1) {
                        this.$message.success('操作成功');
                        this.editVisible=false;
                        this.initAjaxMethod()
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //合同打回ajax
        ohterAjaxMethd() {
            this.$http
                .post(api.TECHNICIAN_MATCH_MAKERLIST)
                .then((res) => {
                    console.log('项目列表', res);
                    if (res.code == 1) {
                        this.listMatchmaker = Array.isArray(res.data) ? res.data : [];
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //删除
        handleDelete(data) {
            this.delAjaxMethod(data.id);
        },
        //编辑
        createBus(row, index, status) {
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.TECHNICIAN_EXAMINE, { id: row.id, status })
                .then((res) => {
                    loading.close();
                    console.log('项目列表', res);
                    if (res.code == 1) {
                        this.$message.success('操作成功');
                        this.tableData[index].status = status;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        resultClick() {
            this.query.nickname = '';
            this.query.mobile = '';
            this.query.is_vip = 0;
            this.query.is_card = 0;
            this.query.pageIndex = 1;
            this.initAjaxMethod();
        },
        matchmakerStatus() {
            this.query.pageIndex = 1;
            this.initAjaxMethod();
        },
        createMethod() {
            this.$router.push({ path: '/technicianAdd', query: { type: 1 } });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            let arr = [];
            if (this.multipleSelection.length <= 0) {
                this.$message({
                    type: 'error',
                    message: '请选择一个'
                });
                return false;
            } else {
                this.multipleSelection.forEach((item) => {
                    arr.push(item.id);
                });
                this.delAjaxMethod(arr.join(','));
            }
        },
        delAjaxMethod(ids) {
            this.$confirm('确定进行此操作', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({ text: '加载中...' });
                this.$http
                    .post(api.TECHNICIAN_DEL, { ids: ids })
                    .then((res) => {
                        loading.close();
                        if (res.code == 1) {
                            this.$message.success('注销成功');
                            this.initAjaxMethod();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.initAjaxMethod();
        },
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.initAjaxMethod();
        },
        initAjaxMethod() {
            let data = {
                pageIndex: this.query.pageIndex, //[string]	是	当前页
                pageSize: this.query.pageSize, //[string]	是	每页条数
                nickname: this.query.nickname, //[string]	是	付款名称
                mobile: this.query.mobile,
                is_vip: this.query.is_vip,
                is_card: this.query.is_card,
                matchmaker_status: this.query.matchmaker_status == true ? 0 : 1
            };
            this.$http
                .post(api.TECHNICIAN_INDEX, data)
                .then((res) => {
                    console.log('财务', res);
                    if (res.code == 1) {
                        this.tableData = Array.isArray(res.data.list) ? res.data.list : [];
                        this.pageTotal = res.data.total;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        setMatchmaker(data) {
          this.setQuery={
            matchmaker_id:'',
            id:data.id
          }
          this.editVisible=true;
        }
    }
};
</script>

<style scoped>
.handle-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.el-input--small {
    display: initial;
}
.handle-input {
    width: auto;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.red {
    color: #f56c6c;
}
.green {
    color: #67c23a;
}
</style>